/*
 * @Author: xianfuyou
 * @Date: 2022-04-04 22:58:39
 * @LastEditors: your name
 * @LastEditTime: 2022-04-07 11:39:09
 * @Description: file content
 */
import React, { useEffect, useState } from 'react'
import { Row, Col, Modal, Form, Input, Select, DatePicker } from 'antd'
import { PlusSquareFilled } from '@ant-design/icons';
import ButtonWarpCpn from '../CommBtn/CommBtn'
import AddJob from './AddJob'
import './css/Model.css'
import moment from 'moment';
const { TextArea } = Input

export default function AddLinkman(props) {
  // console.log(props)
  const { isShow, pOk, pCancel, nowInfo } = props
  const [info, setInfo] = useState(null)
  // 新增职位
  const [isAddJob, setIsAddJob] = useState(false)
  const [form] = Form.useForm()

  useEffect(() => {
    setInfo(nowInfo)
    // 设置初始值
    info && form.setFieldsValue({
      'linkmanName': info.linkmanName,
      'sex': info.sex,
      'job': info.job,
      'tel': info.tel,
      'wechat': info.wechat,
      'qq': info.qq,
      'email': info.email,
      'birth': moment(info.birth),
      'remark': info.remark,
    })
  }, [form, info, nowInfo])

  const handleOk = () => {
    console.log(form.getFieldsValue())
    pOk(false)
  }
  const handleCancel = () => {
    pCancel(false)
  }
  return (
    <div>
      <AddJob isShow={isAddJob} pCancel={() => { setIsAddJob(false) }}></AddJob>
      {/* {console.log('info',info)} */}
      <Modal
        className={'xfy_dep_add_modal addLinkman'}
        title="新增联系人"
        okText="保存"
        cancelText="取消"
        visible={isShow}
        onOk={() => { handleOk() }}
        onCancel={() => { handleCancel() }}
        afterClose={() => { form.resetFields() }}
        destroyOnClose={true}
        forceRender={true}
      >
        <Row>
          <Col span={24} style={{ fontWeight: '700', fontSize: '16px', marginBottom: '15px' }}>新增联系人</Col>
          {/* 表单区域 */}
          <Col span={22} offset={2}>
            <Form form={form} labelCol={{ span: 4 }}
              wrapperCol={{ span: 10 }}>
              <Form.Item label="联系人" name="linkmanName">
                <Input size="small" />
              </Form.Item>
              <Form.Item wrapperCol={{ span: 6 }} label="性别" name="sex">
                <Select size="small">
                  <Select.Option value="demo">Demo</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item wrapperCol={{ span: 16 }} label="职位" >
                <Row>
                  <Col span={9}>
                    <Form.Item name="job" className={'marginForm'}>
                      <Select size="small">
                        <Select.Option value="demo">Demo</Select.Option>
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col style={{ marginLeft: '5px ' }}>
                    <Form.Item className={'marginForm'}>
                      <ButtonWarpCpn onClick={() => { setIsAddJob(true) }} bgcolor="#5cad69" icon={<PlusSquareFilled />}>新增</ButtonWarpCpn>
                    </Form.Item>
                  </Col>
                </Row>
              </Form.Item>
              <Form.Item label="手机号码" name="tel">
                <Input size="small" />
              </Form.Item>
              <Form.Item label="微信" name="wechat">
                <Input size="small" />
              </Form.Item>
              <Form.Item label="QQ" name="qq">
                <Input size="small" />
              </Form.Item>
              <Form.Item label="电子邮箱" name="email">
                <Input size="small" />
              </Form.Item>
              <Form.Item label="生日" name="birth">
                <DatePicker size="small" />
              </Form.Item>
              <Form.Item wrapperCol={{ span: 17 }} label="备注" name="remark">
                <TextArea rows={4} placeholder="maxLength is 6" />
              </Form.Item>
            </Form>
          </Col>
        </Row>
      </Modal>

    </div>
  )
}
